
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
        <meta name="format-detection" content="telephone=no" />
        <title>快速发布</title>
        <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
        <link rel="stylesheet" type="text/css" href="../../css/common.css" />
        <style>
            body{
                background: #f3f3f3;
                font-size: 14px;
            }
            .contain{
                position: relative;
                margin-bottom: 70px;
            }
            .menuRgiht{
                float: right;
                margin-right:20px;
            }
            #scroller{
                width: 100%;
            }
            .aui-list-view{
                overflow: hidden;
            }
            .aui-list-view:after{
                border:none;
            }
            textarea{
                padding:2px 8px;
                border:none;
                height: 80px;
                overflow-y: auto;
                margin-top: 5px;
            }
            .aui-list-view i.aui-iconfont{
                color:#000;
            }
            .addPic {
                font-size: 45px !important;
            }
            .picList li{
                max-height: 120px;
                /*overflow: hidden;*/
                width: 32%;
                margin-right: 2%;
                float: left;
                margin-bottom: 8px;
                position: relative;
            }
            .picList li:nth-of-type(3n){
                margin-right:0;
            }
            .picList li img{
                width: 100%;
                max-height: 120px;
            }
            .pic{
                max-height: 400px;
                overflow: hidden;
                padding-bottom: 0;
            }
            .picGroup{
                text-align: center;
                background: #f5f5f5;
                padding:5px;
                width: 32%;
                /*float: left;*/
                display: table;
                height: 120px;
            }
            .picGroupCell{
                display: table-cell;
                vertical-align: middle;
            }
            footer{
                position: fixed;
                bottom: 0;
                width: 100%;
            }
            /*下面弹出的样式*/
            .pickerToTop{
                position: fixed;
                bottom: 0;
                -webkit-transform: translateY(150px);
                height:150px;
                overflow-y:auto; 
                -webkit-transition:  .5s;
                transition:  .5s;
                z-index: 999;
                width: 100%;
                text-align: center;
            }
            /*下面弹出的样式*/
            .pickerToTop2{
                position: fixed;
                bottom: 0;
                -webkit-transform: translateY(296px);
                height:296px;
                overflow-y:auto; 
                -webkit-transition:  .5s;
                transition:  .5s;
                z-index: 999;
                width: 100%;
                text-align: center;
            }
            .toTopAnimate{
                -webkit-transform: translateY(00px);
            }
            .myBorder{
                height: 8px;
                background: #193d7d;
            }
            .pickerToTop  .aui-list-view,
            .pickerToTop2  .aui-list-view{
                margin: 0;
            }
        </style>
    </head>
    <body>
        <div class="contain">
            <ul class="aui-list-view">
                <li class="aui-list-view-cell" tapmode onclick="openToTwo('releaseCategory_win')">
                    <a class="aui-arrow-right">
                        类目（必填）
                        <span class="menuRgiht">选择类目</span>
                    </a>
                </li>
                <li class="aui-list-view-cell pic">
                    <ul class="picList deleUl">
                        <li><span class="deleIcon" tapmode onclick="delePic(this)"></span><img src="../../image/tese.jpg"></li>
                        <li><span class="deleIcon" tapmode onclick="delePic(this)"></span><img src="../../image/login_bg.png"></li>
                        <li><span class="deleIcon" tapmode onclick="delePic(this)"></span><img src="../../image/tese.jpg"></li>
                        <li><span class="deleIcon" tapmode onclick="delePic(this)"></span><img src="../../image/login_bg.png"></li>
                        <li><span class="deleIcon" tapmode onclick="delePic(this)"></span><img src="../../image/tese.jpg"></li>
                        <li><span class="deleIcon" tapmode onclick="delePic(this)"></span><img src="../../image/login_bg.png"></li>
                        <li><span class="deleIcon" tapmode onclick="delePic(this)"></span><img src="../../image/tese.jpg"></li>
                    </ul>
                    <div class="picGroup" tapmode data-type="getPic" onclick="showPicker(this)">
                        <div class="picGroupCell">
                            <p><img src="../../image/addPic.png"></p>
                            <p>添加图片</p>
                            <p>0/9</p>
                        </div>
                    </div>
                </li>
                <li class="aui-list-view-cell">
                        标题（必填）
                    <textarea name="" class="proName" placeholder="商品标题，不超过30个字"></textarea>
                </li>
            </ul>
            <ul class="aui-list-view">
                <li class="aui-list-view-cell" tapmode onclick="openToTwo('releaseFormat_win')">
                    <a class="aui-arrow-right">
                        商品规格
                        <span class="menuRgiht">未设置</span>
                    </a>
                </li>
            </ul>
            <ul class="aui-list-view">
                <li class="aui-list-view-cell" tapmode onclick="openToTwo('releasePrice_win')">
                    <a class="aui-arrow-right">
                        价格库存
                        <span class="menuRgiht">设置</span>
                    </a>
                </li>
                <li class="aui-list-view-cell" data-type="youfei" tapmode onclick="showPicker(this)">
                    <a class="aui-arrow-right">
                        运费
                        <span class="menuRgiht youfeiType">未设置</span>
                    </a>
                </li>
            </ul>
            <ul class="aui-list-view">
                <li class="aui-list-view-cell">
                        商品详情（选填）
                    <textarea name="" class="proName" placeholder="详细描述您的商品"></textarea>
                </li>
                <li class="aui-list-view-cell pic">
                    <ul class="picList deleUl">
                        <li><span class="deleIcon" tapmode onclick="delePic(this)"></span><img src="../../image/tese.jpg"></li>
                        <li><span class="deleIcon" tapmode onclick="delePic(this)"></span><img src="../../image/login_bg.png"></li>
                        <li><span class="deleIcon" tapmode onclick="delePic(this)"></span><img src="../../image/tese.jpg"></li>
                        <li><span class="deleIcon" tapmode onclick="delePic(this)"></span><img src="../../image/login_bg.png"></li>
                        <li><span class="deleIcon" tapmode onclick="delePic(this)"></span><img src="../../image/tese.jpg"></li>
                        <li><span class="deleIcon" tapmode onclick="delePic(this)"></span><img src="../../image/login_bg.png"></li>
                        <li><span class="deleIcon" tapmode onclick="delePic(this)"></span><img src="../../image/tese.jpg"></li>
                    </ul>
                    <div class="picGroup"  tapmode data-type="getPic" onclick="showPicker(this)">
                        <div class="picGroupCell">
                            <p><img src="../../image/addPic.png"></p>
                            <p>添加详情图</p>
                            <p>0/9</p>
                        </div>
                    </div>
                </li>
            </ul>
            <ul class="aui-list-view">
                <li class="aui-list-view-cell" data-type="proType" tapmode onclick="showPicker(this)">
                    <a class="aui-arrow-right">
                        商品特殊属性
                        <span class="menuRgiht proType">正常商品</span>
                    </a>
                </li>
            </ul>
        </div>  
        <footer class="aui-nav">
            <div class="myBtn">确认发布</div>
        </footer> 
        <div class="pickerToTop">
            
            <ul class="aui-list-view youfei">
                <li class="aui-list-view-cell zfBlue"   tapmode onclick="setYoufei(this)">
                    卖家承担邮费
                </li>
                <li class="aui-list-view-cell"  tapmode onclick="setYoufei(this)">
                    买家承担邮费
                </li>
                <li class=" myBorder" >
                    
                </li>
                <li class="aui-list-view-cell "  tapmode onclick="hidePicker()">
                    取消
                </li>
            </ul>
            <ul class="aui-list-view getPic">
                <li class="aui-list-view-cell" tapmode onclick="getPic(2)">
                    拍照
                </li>
                <li class="aui-list-view-cell" onclick="getPic(1)">
                    其他从相册选择
                </li>
                <li class=" myBorder" >
                    
                </li>
                <li class="aui-list-view-cell " tapmode onclick="hidePicker()" >
                    取消
                </li>
            </ul>
        </div>
        <div class="pickerToTop2">
            <ul class="aui-list-view ">
                <li class="aui-list-view-cell" tapmode onclick="changeProType(this)">
                    尾货
                </li>
                <li class="aui-list-view-cell" onclick="changeProType(this)">
                    断码
                </li>
                <li class="aui-list-view-cell" tapmode onclick="changeProType(this)">
                    小批量
                </li>
                <li class="aui-list-view-cell" onclick="changeProType(this)">
                    残次品
                </li>
                <li class="aui-list-view-cell" tapmode onclick="changeProType(this)">
                    正常商品
                </li>
                <li class=" myBorder" >
                    
                </li>
                <li class="aui-list-view-cell " tapmode onclick="hidePicker()" >
                    取消
                </li>
            </ul>
        </div>
    </body>
    <script type="text/javascript" src="../../script/api.js"></script>
    <script type="text/javascript" src="../../script/common.js"></script>
    <script type="text/javascript" src="../../script/doT.min.js"></script>
    <script type="text/javascript" src="../../script/jquery-1.11.3.js"></script>
    <script type="text/javascript" src="../../script/mui.js"></script>
    <script type="text/javascript">
        apiready = function() {
            api.parseTapmode();
            
        }
        // mui遮罩
        var mask = mui.createMask(hidePicker);
        // 显示遮罩
        function showPicker(obj){
            mask.show();
            var type=$(obj).attr("data-type");
            switch(type){
                case 'getPic':
                    $(".getPic").css({"display":"block"});
                    $(".youfei").css({"display":"none"});
                    $(".pickerToTop").addClass("toTopAnimate");
                    break;
                case 'youfei':
                    $(".getPic").css({"display":"none"});
                    $(".youfei").css({"display":"block"});
                    $(".pickerToTop").addClass("toTopAnimate");
                    break;
                case 'proType':
                    $(".getPic").css({"display":"none"});
                    $(".youfei").css({"display":"none"});
                    $(".pickerToTop2").addClass("toTopAnimate");
                    break;

            }
        }
        // 关闭遮罩
        function hidePicker(){
            $(".pickerToTop").removeClass("toTopAnimate");
            $(".pickerToTop2").removeClass("toTopAnimate");
            mask.myclose();
        }
        // 相册选择
        function getPic(index){
            hidePicker();
            if (index == 1) {
                api.getPicture({
                    sourceType : 'library',
                    encodingType : 'jpg',
                    mediaValue : 'pic',
                    destinationType : 'base64',
                    allowEdit : true,
                    quality : 60,
                    saveToPhotoAlbum : false
                }, function(ret, err) {
                    if (ret) {
                        if (!ret.base64Data) {
                            imgBase64 = '';
                        } else {
                            imgBase64 = ret.base64Data;
                            alert(imgBase64)
                            postData();
                            api.toast({
                                msg : '更换成功',
                                duration : 2000,
                                location : 'middle'
                            })
                        }
                    } else {
                        api.toast({
                            msg : err.msg,
                            duration : 2000,
                            location : 'bottom'
                        })
                    }
                })
            } else if (index == 2) {
                api.getPicture({
                    sourceType : 'camera',
                    encodingType : 'jpg',
                    mediaValue : 'pic',
                    destinationType : 'base64',
                    allowEdit : true,
                    quality : 60,
                    saveToPhotoAlbum : true
                }, function(ret, err) {
                    if (ret) {
                        if (!ret.base64Data) {
                            imgBase64 = '';
                        } else {
                            imgBase64 = ret.base64Data;
                            postData();
                            api.toast({
                                msg : '更换成功',
                                duration : 2000,
                                location : 'middle'
                            })
                        }
                    } else {
                        api.toast({
                            msg : err.msg,
                            duration : 2000,
                            location : 'bottom'
                        })
                    }
                })
            }
        }
        // 邮费设置
        function setYoufei(obj){
            $(".youfeiType").text($(obj).text());
            hidePicker();
        }
        // 商品列别设置
        function changeProType(obj){
            $(".proType").text($(obj).text());
            hidePicker();
        }
        // 删除选择的图片
        function delePic(obj){
            $(obj).parent().remove();
        }
    </script>
</html>
